/**
 * Created by levy on 2016/12/28
 */
import React from 'react'
import {connect} from 'react-redux'
import _ from 'lodash'
import Loading from './Loading'

const reportFields = [
    {name: 'thisYear'},
    {name: 'FACTUAL'},
    {name: 'FEXPECT'},

    {name: 'nextYear'},

    {name: 's1'},
    {name: 'FMONTH1'},
    {name: 'FMONTH2'},
    {name: 'FMONTH3'},

    {name: 's2'},
    {name: 'FMONTH4'},
    {name: 'FMONTH5'},
    {name: 'FMONTH6'},

    {name: 's3'},
    {name: 'FMONTH7'},
    {name: 'FMONTH8'},
    {name: 'FMONTH9'},

    {name: 's4'},
    {name: 'FMONTH10'},
    {name: 'FMONTH11'},
    {name: 'FMONTH12'},

]

const getNextYear = function (current) {
    if(!current) return ''
    let next = current.substr(0, current.length - 1) * 1 + 1
    return next + '年'
}

@connect(
    state => {
        return {
            budget: state.budget
        }
    }
)
export default class BudgetReport extends React.Component {
    static defaultProps = {
        selectYear: '2016年'
    }
    componentDidMount() {
        // window.onresize = function () {
        //     let fixedTable = document.getElementsByClassName('fixed-table')[0]
        //     let scrollTable = document.getElementsByClassName('scroll-table')[0]
        //
        //     if (!fixedTable) return
        //
        //     // 正常table设置水平偏移
        //     let width = fixedTable.clientWidth
        //     let left = width - 1 // 以免border重叠
        //     scrollTable.style.left = left+'px'
        //
        //
        //     // 固定table变化th
        //     let height = scrollTable.firstChild.clientHeight
        //     let ths = fixedTable.getElementsByTagName('th')
        //
        //     for(let i = 0, len = ths.length; i < len; i++)
        //         ths[i].style.height = height + 'px'
        //
        //     let top = scrollTable.offsetTop
        //     let y = window.scrollY
        //     fixedTable.style.top = top - y + 'px'
        //
        //     document.body.onscroll = function (e) {
        //         let y = window.scrollY
        //         fixedTable.style.top = top - y + 'px'
        //     }
        // }
    }
    componentDidUpdate() {
        // thead里的th高度也是动态的
        // let {
        //     isDataReady,
        //     isStructReady,
        // } = this.props.budget
        //
        // if (!isDataReady || !isStructReady) return
        //
        // let fixedTable = document.getElementsByClassName('fixed-table')[0]
        // let scrollTable = document.getElementsByClassName('scroll-table')[0]
        //
        // // 正常table设置水平偏移
        // let width = fixedTable.clientWidth
        // let left = width - 1 // 以免border重叠
        // scrollTable.style.left = left+'px'
        //
        //
        // // 固定table变化th
        // let height = scrollTable.firstChild.clientHeight
        //
        // let ths = fixedTable.getElementsByTagName('th')
        //
        // for(let i = 0, len = ths.length; i < len; i++)
        //   ths[i].style.height = height + 'px'
        //
        //
        // // 垂直方向滚动时 固定table改变垂直偏移
        // let body = document.body
        // let top = scrollTable.offsetTop
        //
        // if (!body.onscroll)
        //     body.onscroll = function (e) {
        //         let y = window.scrollY
        //         // console.log('window.scrollY',y)
        //         // console.log('fixedTable.style.top',fixedTable.style.top)
        //
        //         fixedTable.style.top = top - y + 'px'
        //     }

    }

    render() {
        let {
            isDataReady,
            isStructReady,
            dimTitles,
            module: {ROWDIMENSIONS = []},
            reportStruct = [],
            reportData = [],
            tableLoading
        } = this.props.budget

        const getDimTitle = (id) => {
            const dimType = _.find(dimTitles, {ID: id})

            return {
                head: dimType ? dimType.FNAME : null,
                code: dimType ? 'F' + dimType.FCODE.toUpperCase() : null
            }
        }

        let headAndCode = ROWDIMENSIONS.map(obj => getDimTitle(obj.type))

        return (
            isStructReady && isDataReady ?
                <div className="table-container">
                    {

                        // <table className="fixed-table">
                        //     <thead>
                        //     <tr>
                        //         {
                        //             headAndCode.map(obj => <th key={'th-'+obj.code} rowSpan="4">{obj.head}</th>)
                        //         }
                        //     </tr>
                        //     </thead>
                        //     <tbody>
                        //     {
                        //         reportStruct.map(struct => (
                        //             <tr key={'fixed-tr'+struct.ID}>
                        //                 {
                        //                     headAndCode.map(obj => <td key={struct.ID+obj.code}>{struct[obj.code]}</td>)
                        //                 }
                        //             </tr>
                        //         ))
                        //     }
                        //     </tbody>
                        // </table>
                    }
                    <table className="scroll-table" >
                        {
                            reportStruct.length ?
                                <thead dangerouslySetInnerHTML={{__html:reportStruct[0].PAGEHEADERS}} />
                                : null
                        }
                        {
                            /*
                            <thead>
                            <tr>
                                <th colSpan="3">{this.props.selectYear}</th>
                                <th colSpan="17">{getNextYear(this.props.selectYear)}</th>
                            </tr>
                            <tr>
                                <th colSpan="3">预计</th>
                                <th colSpan="17">预计</th>
                            </tr>
                            <tr>

                                <th>合计(元)</th>
                                <th>1-9月实际数(元)</th>
                                <th>10-12月预计数(元)</th>

                                <th>全年合计(元)</th>
                                <th>一季度(元)</th>
                                <th>1月(元)</th>
                                <th>2月(元)</th>
                                <th>3月(元)</th>

                                <th>二季度(元)</th>
                                <th>4月(元)</th>
                                <th>5月(元)</th>
                                <th>6月(元)</th>

                                <th>三季度(元)</th>
                                <th>7月(元)</th>
                                <th>8月(元)</th>
                                <th>9月(元)</th>

                                <th>四季度(元)</th>
                                <th>10月(元)</th>
                                <th>11月(元)</th>
                                <th>12月(元)</th>
                            </tr>
                            </thead>
                            * */
                        }
                        <tbody>
                         {
                        //     reportStruct.map(struct => {
                        //         let data = _.find(reportData, {FDIM_COMB_ID: struct.ID}) || {}
                        //
                        //         return (
                        //             <tr key={'scroll-tr'+struct.ID}>
                        //                 {
                        //                     reportFields.map((field, index) => {
                        //                         return <td key={struct.ID+field.name}>{data[field.name] || ''}</td>
                        //                     })
                        //                 }
                        //             </tr>
                        //         )
                        //     })
                         }
                        </tbody>
                    </table>
                </div>
                : <Loading loading={tableLoading}/>
        )
    }
}

